{$layout}

<h3>添加新代理</h3>

<div>
	<!-- 导航 -->
	<div class="ui steps small grey fluid">
		<div class="step" :class="{active:currentStep == 'name'}">
			<div class="content">
				<div class="title">名称</div>
			</div>
		</div>
		<div class="step" :class="{active:currentStep == 'domain'}">
			<div class="content">
				<div class="title">绑定域名</div>
			</div>
		</div>
		<div class="step" :class="{active:currentStep == 'listen'}">
			<div class="content">
				<div class="title">绑定网络地址</div>
			</div>
		</div>
		<div class="step" :class="{active:currentStep == 'type'}">
			<div class="content">
				<div class="title">服务类型</div>
			</div>
		</div>
		<div class="step" :class="{active:currentStep == 'backend'}" v-if="serverType == 'proxy' || serverType == 'tcp'">
			<div class="content">
				<div class="title">后端服务器地址</div>
			</div>
		</div>
		<div class="step" :class="{active:currentStep == 'root'}" v-if="serverType == 'static'">
			<div class="content">
				<div class="title">网站根目录</div>
			</div>
		</div>
		<div class="step" :class="{active:currentStep == 'finish'}">
			<div class="content">
				<div class="title">完成</div>
			</div>
		</div>
	</div>

	<!-- 步骤 -->
	<form class="ui form" data-tea-action="$" autocomplete="off">
		<!-- 名称 -->
		<div v-show="currentStep == 'name'">
			<table class="ui table definition selectable">
				<tr>
					<td class="title">服务名称 *</td>
					<td>
						<input type="text" name="description" v-model="description" maxlength="100"  @keyup.enter="nextName()" @keypress.enter.prevent="1" />
						<p class="comment">给此服务起一个易懂的名字，比如 "负载均衡001"</p>
					</td>
				</tr>
			</table>
			<button class="ui button primary" type="button" @click.prevent="nextName()">下一步</button>
		</div>

		<!-- 绑定域名 -->
		<div v-show="currentStep == 'domain'">
			<table class="ui table definition selectable">
				<tr>
					<td class="title">绑定的域名</td>
					<td>
<span class="ui label tiny" v-for="(name, arrayIndex) in names" :class="{blue:nameEditingIndex == arrayIndex}">{{name}}
                        <input type="hidden" name="names" :value="name"/> &nbsp;
						<a href="" @click.prevent="editName(arrayIndex)" title="修改"><i class="icon pencil"></i></a>
                        <a href="" @click.prevent="removeName(arrayIndex)" title="删除"><i class="icon remove"></i></a>
                    </span>
						<div class="ui fields inline" v-if="nameAdding" style="margin-top:0.8em">
							<div class="ui field">
								<input type="text" name="addingNameName" style="width:16em" maxlength="100" placeholder="域名，比如example.com" @keyup.enter="confirmAddName()" @keypress.enter.prevent="1" v-model="addingNameName" />
							</div>
							<div class="ui field">
								<button class="ui button tiny" type="button" @click="confirmAddName()">确定</button>
								&nbsp; <a href="" @click.prevent="cancelNameAdding()">取消</a>
							</div>
						</div>
						<div class="ui field" style="margin-top: 1em">
							<button class="ui button tiny" type="button" @click="addName()">+</button>
						</div>
						<p class="comment">用户可以访问的域名，可以使用星号通配符（*）来表示匹配一组域名，比如www.example.com *.google.com。</p>
					</td>
				</tr>
			</table>
			<button class="ui button primary" type="button" @click.prevent="nextDomain()" v-if="names.length > 0">下一步</button>
			<button class="ui button primary" type="button" @click.prevent="nextDomain()" v-if="names.length == 0">跳过</button> &nbsp;&nbsp;
			<a href="" @click.prevent="go('name')">上一步</a>
		</div>

		<!-- 网络地址 -->
		<div v-show="currentStep == 'listen'">
			<table class="ui table definition selectable">
				<tr>
					<td class="title">绑定的网络地址 *</td>
					<td>
						<span class="ui label tiny" v-for="(listen, arrayIndex) in listens" :class="{blue:arrayIndex == editingListenIndex}">{{listen}}
                        <input type="hidden" name="listens" :value="listen"/> &nbsp;
						<a href="" @click.prevent="editListen(arrayIndex)" title="修改"><i class="icon pencil"></i></a>
                        <a href="" @click.prevent="removeListen(arrayIndex)" title="删除"><i class="icon remove"></i></a>
                    </span>
						<div class="ui fields inline" v-if="listenAdding" style="margin-top:0.8em">
							<div class="ui field">
								<input type="text" name="addingListenName" style="width:22em" maxlength="100" placeholder="绑定的网络地址，比如 8080 或 0.0.0.0:8080" @keyup.enter="confirmAddListen()" @keypress.enter.prevent="1" v-model="addingListenName" />
							</div>
							<div class="ui field">
								<button class="ui button tiny" type="button" @click="confirmAddListen()">确定</button>
								&nbsp; <a href="" @click.prevent="cancelListenAdding()">取消</a>
							</div>
						</div>
						<div class="labels-box" v-if="localAddrs.length > 0 && addingListenName.length > 0">
							<a class="ui label tiny normal" v-for="localAddr in localAddrs" v-if="localAddr.addr.startsWith(addingListenName) || addingListenName.startsWith(localAddr.addr)" v-html="highlightAddr(localAddr, addingListenName)" @click="selectLocalAddr(localAddr.addr)" title="点击使用此地址"></a>
						</div>
						<div class="ui field" style="margin-top: 1em">
							<button class="ui button tiny" type="button" @click="addListen()">+</button>
						</div>
						<p class="comment" style="padding-bottom:0;margin-bottom:0.4em">绑定的服务器端的网络地址，可以是一个单独的端口，比如8080，也可以是IP加端口，比如"192.168.1.100:80"；端口地址支持一个范围"[开始端口号-结束端口号]"，比如"192.168.1.100:[81-100]"。</p>
						<p class="comment" style="padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0">要想通过服务器的所有IP地址都能访问到服务，可以将IP地址写成"0.0.0.0:端口"。</p>
						<p class="comment" style="padding-top:0;margin-top:0.4em">如果想设置HTTPS/TLS，可以在完成代理服务添加后再设置。</p>
					</td>
				</tr>
			</table>
			<button class="ui button primary" type="button" @click.prevent="nextListen()">下一步</button> &nbsp;&nbsp;
			<a href="" @click.prevent="go('domain')">上一步</a>
		</div>

		<!-- 类型 -->
		<div v-show="currentStep == 'type'">
			<table class="ui table definition selectable">
				<tr>
					<td class="title">服务类型 *</td>
					<td>
						<select class="ui dropdown" name="serverType" v-model="serverType" style="width:11em">
							<option value="proxy">HTTP反向代理服务</option>
							<option value="forwardProxy">HTTP正向代理服务</option>
							<option value="tcp">TCP反向代理服务</option>
							<option value="static">普通的Web服务</option>
						</select>
						<p class="comment" v-if="serverType == 'proxy'">[Client] -&gt; [TeaWeb -&gt; Server] 通过TeaWeb将用户请求转发到一个或一组后端服务器中，通常可以实现负载均衡和反向代理服务。</p>
						<p class="comment" v-if="serverType == 'forwardProxy'">[Client -&gt; TeaWeb] -&gt; [Server] 客户端通过配置此代理地址访问网络服务，通常用来隐藏客户端地址和安全审计使用。</p>
						<p class="comment" v-if="serverType == 'static'">通过TeaWeb分发服务上的静态文件，之后也可以通过配置路径规则来实现动态内容的分发，比如Fastcgi。</p>
						<p class="comment" style="padding:0">这里的服务类型只是方便你快速添加代理服务，成功添加后可以任意修改配置。</p>
					</td>
				</tr>
			</table>

			<button class="ui button primary" type="button" @click.prevent="nextType()">下一步</button> &nbsp;&nbsp;
			<a href="" @click.prevent="go('listen')">上一步</a>
		</div>

		<!-- 后端服务器 -->
		<div v-show="currentStep == 'backend'">
			<table class="ui table definition selectable">
				<tr>
					<td class="title">后端服务器地址</td>
					<td>
						<span class="ui label tiny" v-for="(backend, arrayIndex) in backends" :class="{blue:arrayIndex == editingBackendIndex}">{{backend}}
                        <input type="hidden" name="backends" :value="backend"/> &nbsp;
						<a href="" @click.prevent="editBackend(arrayIndex)" title="修改"><i class="icon pencil"></i></a>
                        <a href="" @click.prevent="removeBackend(arrayIndex)" title="删除"><i class="icon remove"></i></a>
                    </span>
						<div class="ui fields inline" v-if="backendAdding" style="margin-top:0.8em">
							<div class="ui field">
								<input type="text" name="addingBackendName" style="width:18em" maxlength="100" placeholder="比如 192.168.1.101:80" @keyup.enter="confirmAddBackend()" @keypress.enter.prevent="1" v-model="addingBackendName" />
							</div>
							<div class="ui field">
								<button class="ui button tiny" type="button" @click="confirmAddBackend()">确定</button>
								&nbsp; <a href="" @click.prevent="cancelBackendAdding()">取消</a>
							</div>
						</div>
						<div class="labels-box" v-if="localListens.length > 0 && addingBackendName.length > 0">
							<a class="ui label tiny normal" v-for="localAddr in localListens" v-if="localAddr.addr.indexOf(addingBackendName) >= 0 || addingBackendName.indexOf(localAddr.addr) >= 0" v-html="highlightAddr(localAddr, addingBackendName)" @click="selectLocalBackend(localAddr)" title="点击使用此地址"></a>
						</div>
						<div class="ui field" style="margin-top: 1em">
							<button class="ui button tiny" type="button" @click="addBackend()">+</button>
						</div>
						<p class="comment">实际提供服务的后端服务器地址，比如nginx、Tomcat的访问地址，通常为IP加端口，比如"192.168.1.101:8080"。</p>
						<p class="comment" style="padding:0">应配置好防火墙或者其他设置，以确保TeaWeb所在服务器可以正常访问到这些地址。</p>

					</td>
				</tr>
			</table>
			<button class="ui button primary" type="button" @click.prevent="nextBackend()">下一步</button> &nbsp;&nbsp;
			<a href="" @click.prevent="go('type')">上一步</a>
		</div>

		<!-- 网站根目录 -->
		<div v-show="currentStep == 'root'">
			<table class="ui table definition selectable">
				<tr>
					<td class="title">网站根目录</td>
					<td>
						<auto-complete-path-box name="root" placeholder="比如 /home/www/mysite" maxlength="500" value="" :autocomplete="dirAutoComplete"></auto-complete-path-box>
						<p class="comment">请确保目录是相对于服务器文件系统的根目录的绝对路径。</p>
					</td>
				</tr>
			</table>

			<button class="ui button primary" type="button" @click.prevent="nextRoot()">下一步</button> &nbsp;&nbsp;
			<a href="" @click.prevent="go('type')">上一步</a>
		</div>

		<!-- 完成 -->
		<div v-show="currentStep == 'finish'">
			<table class="ui table definition selectable">
				<tr>
					<td class="title">名称</td>
					<td>{{description}}</td>
				</tr>
				<tr>
					<td>绑定的域名</td>
					<td>
						<span v-if="names.length == 0" class="disabled">暂时还没有设置绑定的域名</span>
						<span v-for="name in names" class="ui label tiny">{{name}}</span>
					</td>
				</tr>
				<tr>
					<td>绑定的网络地址</td>
					<td>
						<span v-if="listens.length == 0" class="disabled">暂时还没有设置绑定的网络地址</span>
						<span v-for="listen in listens" class="ui label tiny">{{listen}}</span>
					</td>
				</tr>
				<tr>
					<td>服务类型</td>
					<td>
						<span v-if="serverType == 'proxy'">HTTP反向代理服务</span>
						<span v-if="serverType == 'forwardProxy'">HTTP正向代理服务</span>
						<span v-if="serverType == 'static'">普通的Web服务</span>
						<span v-if="serverType == 'tcp'">TCP反向代理服务</span>
					</td>
				</tr>
				<tr v-if="serverType == 'static'">
					<td>网站根目录</td>
					<td>
						<span v-if="root.length == 0" class="disabled">暂时还没有设置网站根目录</span>
						<span v-if="root.length > 0">{{root}}</span>
					</td>
				</tr>
				<tr v-if="serverType == 'proxy' || serverType == 'tcp'">
					<td>后端服务器地址</td>
					<td>
						<span v-if="backends.length == 0" class="disabled">暂时还没有设置后端服务器地址</span>
						<span v-for="backend in backends" class="ui label tiny">{{backend}}</span>
					</td>
				</tr>
			</table>
			<button class="ui button primary" type="submit">确认保存</button> &nbsp;&nbsp;
			<a href="" @click.prevent="go('root')" v-if="serverType == 'static'">上一步</a>
			<a href="" @click.prevent="go('backend')" v-if="serverType == 'proxy' || serverType == 'forwardProxy' || serverType == 'tcp'">上一步</a>
		</div>
	</form>
</div>